<script>
export default {
	name: 'HowDownload',
	components: {
		
  },
  data() {
    return {

		}
  },
  mounted() {

	},
  methods: {

	},
};
</script>

<template>
  <div class="how-download">
		<header class="header">
			如何下载培训报告？
		</header>
		<main class="main">
			<div class="main__title">操作方式：</div>
			<div class="pb-12">1、
				<span class="font-semibold">MAC OS：</span>
				在查看报告页点击“Command+P”唤起打印，选择另存为PDF，或点击顶部菜单栏，点击“文件”选择“导出为PDF”（Safari浏览器）/点击“文件”选择“打印”（Google Chrome、Microsoft Edge）。
			</div>
			<div>2、
				<span class="font-semibold">Windows：</span>
				在查看报告页点击“Ctrl+P”唤起打印，选择另存为PDF，或点击浏览器的更多按钮，点击“打印”选择“另存为PDF”。
			</div>
			<div class="p-24">MAC OS示例：</div>
			<div class="MAC-OS-box">

			</div>
			<div class="p-24">Windows示例：</div>
			<div class="Windows-box">

			</div>
		</main>
		<footer>
			<a-button>返回列表</a-button>
		</footer>
  </div>
</template>

<style lang="less" scoped>
.how-download {
	padding: 24px;

	.header {
		padding-bottom: 24px;
		border-bottom: 1px solid #F2F3F5;
		font-size: 16px;
		font-weight: 600;
	}

	.main {
		padding: 24px 0;

		.main__title {
			padding-bottom: 16px;
		}

		.MAC-OS-box {
			display: grid;
		}

		.Windows-box {
			display: grid;
		}
	}

	.p-24 {
		padding: 24px;
	}

	.pb-12 {
		padding-bottom: 12px;
	}
	
	.font-semibold {
		font-weight: 600;
	}
}
</style>
